<script setup>
    // import { computed, reactive, ref, watch, watchEffect } from 'vue';

    
    const count = ref(1);

    // 计算属性
    const plusOne = computed(() => {
        return count.value + 1;
    })

    /**
     * watch用法
     */
    // 监听ref数据的变化
    watch(count, (newValue, oldValue) => {
        console.log(oldValue, newValue)
    })

    const user = reactive({
        name: '张三',
        age: 18 
    })

    watch(user, (newValue, oldValue) => {
        console.log(oldValue, newValue)
    }) // 自动启用深度监视

    /**
     * watchEffect用法
     */
    watchEffect(() => {
        console.log(count.value)
        console.log(user.name)
    })




</script>

<template>  
    <p>{{ count }}</p>
    <p>{{ plusOne }}</p>
    <p>{{ user.name }}</p>

    <button @click="count++">修改count</button>
    <button @click="user.name = '李四'">修改user.name</button>
</template>

<style scoped>

</style>